import React, { Component } from "react";


/* 
  react 中 子组件给父组件传值,其实本质上还是父组件给子组件传值,只是说我们传递的是一个函数
  子组件只需要调用该函数即可,调用的时候可以将参数携带过去

  1. 父组件先定义接收的函数
  2. 通过属性将该函数传递到子组件
  3.子组件在特定的时候调用该函数即可

*/



const Header = (props) => {
  // console.log(props);
  //触发父组件传递过来的函数
  props.fn({
    name:'张一',
    msg:'人去哪里了?',
    age:100
  })
  return (
    <>
      <div>欢迎来到 {props.name} 班级</div>
      <div>{props.num}</div>
      <div>{String(props.bool)}</div>
    </>
  );
};

class Content extends Component {
  render() {
    this.props.myFn({
      name:'张二',
      age:88
    })
    return (
      <>
        <div>
          {this.props.contentName} 学习 React 实际上就是在学 JavaScript
        </div>
      </>
    );
  }
}

export default class App extends Component {
  //父组件中先定义一个接收的函数,用来接收子组件传递值用的方法
  getData = (val) => {
    console.log('父组件接收:',val);
  };
  render() {
    return (
      <div>
        <Header fn={this.getData} name="H5-2218" num={10} bool={true}></Header>
        <Content myFn={this.getData} contentName="张一" />
      </div>
    );
  }
}
